<template>
  <div class="content">
    <div class="header">
      <p class="form-top-p">
        <el-select
          v-model="listQuery.unitDeptCode"
          clearable
          placeholder="请选择单位"
          @clear="delDeptDw"
          @change="changeDw">
          <el-option
            v-for="item in deptList_dw"
            :key="item.deptNo"
            :label="item.deptName"
            :value="item.deptNo" />
        </el-select>
      </p>
      <p class="form-top-p">
        <el-select
          v-model="listQuery.lineId"
          clearable
          placeholder="请选择线路"
          @clear="delLine"
          @change="changeLine">
          <el-option
            v-for="item in lines"
            :key="item.seclineId"
            :label="item.seclineName"
            :value="item.seclineId" />
        </el-select>
      </p>
      <p class="form-top-p">
        <el-select v-model="listQuery.lineSiteId" clearable placeholder="请选择区站">
          <el-option
            v-for="item in siteList"
            :key="item.siteId"
            :label="item.siteName"
            :value="item.siteId" />
        </el-select>
      </p>
      <p class="form-top-p">
        <el-select v-model="listQuery.workShopCode" clearable placeholder="请选择车间">
          <el-option
            v-for="(item,index) in deptList_cj"
            :key="index"
            :label="item.deptName"
            :value="item.deptNo" />
        </el-select>
      </p>
      <p class="form-top-p">
        <el-date-picker
          v-model="listQuery.findDateList"
          :clearable="false"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeFindDate" />
      </p>
      <p class="form-top-p">
        <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
        <el-button
          style="background: #A7B7C9;color:#FFFFFF;"
          size="mini"
          icon="el-icon-refresh"
          @click="reset">重置</el-button>
      </p>
    </div>
    <div class="main">
      <div style="width:100%;height:39%; display: flex;justify-content: space-between;">
        <div style="width:39.6%;height:100%;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <img src="@/assets/images/3836e689c58e5ea49048f626a97192a.png" alt>
              <span> 缺陷多发支柱TOP30</span>
            </div>
            <div class="cardMain">
              <el-table
                ref="defectPillarTop"
                :data="tableData1"
                height="100%"
                border
                stripe
                :highlight-current-row="true"
                :row-style="{height: '40px'}"
                @row-click="rowClick">
                <el-table-column label="序号" align="center" type="index" width="50" />
                <el-table-column label="单位" align="center" prop="sectionName" width="100" />
                <el-table-column label="线路" align="center" prop="lineName" show-overflow-tooltip />
                <el-table-column label="区站" align="center" prop="siteName" show-overflow-tooltip />
                <el-table-column label="支柱号" align="center" prop="pillarNum" width="70" />
                <el-table-column
                  label="所属工区"
                  align="center"
                  prop="workareaName"
                  show-overflow-tooltip />
                <el-table-column label="缺陷总数" align="center" prop="defectTotal" />
              </el-table>
            </div>
          </el-card>
        </div>
        <div style="width:59.6%;height:100%;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <img src="@/assets/images/3836e689c58e5ea49048f626a97192a.png" alt>
              <span style="margin-right:7px;">{{ pillarNum + '缺陷详情' }}</span>
              <el-tooltip class="item" effect="dark" placement="top-end">
                <div slot="content">
                  缺陷详情默认展示缺陷多发支柱TOP30列表中第一个支柱，
                  <br>可点击切换查看其他支柱缺陷详情
                </div>
                <img src="@/assets/images/Vector.png" style="width:12px;height:12px;" alt>
              </el-tooltip>
            </div>
            <div class="cardMain">
              <el-table :data="tableData2" height="100%" :row-style="{height: '40px'}" border stripe>
                <el-table-column label="序号" align="center" type="index" width="50" />
                <el-table-column label="6C类型" align="center" prop="cType" />
                <el-table-column
                  label="发现日期"
                  align="center"
                  prop="findDate"
                  show-overflow-tooltip
                  :formatter="formatDate" />
                <el-table-column
                  label="缺陷类型"
                  align="center"
                  prop="categoryName"
                  show-overflow-tooltip />
                <el-table-column label="缺陷等级" align="center" prop="levelName" />
                <el-table-column label="所属工区" align="center" prop="deptName" show-overflow-tooltip />
                <el-table-column
                  label="缺陷描述"
                  align="center"
                  prop="defectDescription"
                  show-overflow-tooltip />
                <el-table-column align="center" label="操作" min-width="60">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="view(scope.row, scope.$index)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
      <div style="width:100%;height:29%;display: flex;justify-content: space-between;">
        <div style="width:59.6%;height:100%;display:flex;">
          <div class="chats">
            <el-card class="box-card">
              <div
                slot="header"
                style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
                <div style="display:flex;align-items: center">
                  <img src="@/assets/images/chrts.png" style="margin-right:7px;" alt>
                  <span style="margin-right:7px;">{{ pillarNum + '缺陷类型分布' }}</span>
                  <el-tooltip class="item" effect="dark" placement="top-end">
                    <div slot="content">
                      缺陷类型分布默认展示缺陷多发支柱TOP30列表中第一个支
                      <br>柱，可点击切换查看其他支柱缺陷类型分布
                    </div>
                    <img src="@/assets/images/Vector.png" style="width:12px;height:12px;" alt>
                  </el-tooltip>
                </div>

                <el-switch v-model="switch1" style="display: block" inactive-text="数据展示" />
              </div>
              <div ref="charts1" class="cardMain" />
            </el-card>
          </div>
          <!-- <div class="lend"></div> -->
        </div>
        <div style="width:39.6%;height:100%;">
          <el-card class="box-card">
            <div
              slot="header"
              style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
              <div style="display:flex;align-items: center">
                <img src="@/assets/images/chrts.png" style="margin-right:7px;" alt>
                <span style="margin-right:7px;">{{ pillarNum + '缺陷等级分布' }}</span>
                <el-tooltip class="item" effect="dark" placement="top-end">
                  <div slot="content">
                    缺陷等级分布默认展示缺陷多发支柱TOP30列表中第一个支
                    <br>柱，可点击切换查看其他支柱缺陷等级分布
                  </div>
                  <img src="@/assets/images/Vector.png" style="width:12px;height:12px;" alt>
                </el-tooltip>
              </div>

              <el-switch v-model="switch2" style="display: block" inactive-text="数据展示" />
            </div>
            <div ref="charts2" class="cardMain" />
          </el-card>
        </div>
      </div>
      <div style="width:100%;height:29%;">
        <el-card class="box-card">
          <div
            slot="header"
            style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
            <div style="display:flex;align-items: center">
              <span style="margin-right:7px;">6C类型缺陷分布图</span>
            </div>
          </div>
          <div ref="charts3" class="cardMain" />
        </el-card>
      </div>
    </div>
    <look-data-dialog :dialog="lookDialog" :defect-type="defectType" />
  </div>
</template>
<script>
import { findManageUnitDeptList, getLineList, getSiteByLines } from '@/api/platform'
import { getDeptByTypeCodeBy } from '@/api/cms/basic'
import { getDefectPillarTop30, getDefectPillarDetail, getDefectTypeEchart, getDefectLevelEchart, getDefectEchart } from '@/api/cms/Analysis-management/synthetical-Analysis/defectPillar'
import echarts from 'echarts'
import LookDataDialog from '../../analysis-management/defect-management/defectInfo/components/LookDataDialog'
export default {
  components: {
    LookDataDialog
  },
  data() {
    return {
      defectType: '1', // 切换的缺陷类型：1：设备缺陷；2：树木隐患；3：鸟害；4：其他
      delRailShow: false,
      lookDialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        type: 'view',
        dataList: {},
        form: {
          id: ''

        }
      },
      unitDeptCode: '',
      pillarNum: '',
      deptList_dw: [],
      deptList_cj: [],
      lines: [],
      siteList: [],
      listQuery: {
        unitDeptCode: '',
        workShopCode: '',
        lineId: '',
        railType: 'PT',
        lineSiteId: '',
        findDateList: ['', ''],
        findStartDate: '',
        findEndDate: ''
      },
      queryDept: {
        deptTypeCode: 22,
        railType: 'PT',
        fid: ''
      },
      queryLine: {
        unitDeptCode: '',
        railType: 'PT'
      },
      tableData1: [],
      tableData2: [],
      tableData3: {
        C1: [],
        C2: [],
        C3: [],
        C4: [],
        C5: [],
        C6: []
      },
      switch1: true,
      switch2: true,
      getDefectTypeList: [],
      getDefectLevelList: [],
      colors: [{
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#2B8EF3' },
            { offset: 1, color: '#2BE7F3' }
          ]
        }
      }, {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#48E5E5' },
            { offset: 1, color: '#8AF0B3' }
          ]
        }
      }, {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#3254DD' },
            { offset: 1, color: '#53C1FF' }
          ]
        }
      }]
    }
  },
  watch: {
    switch2(ov) {
      console.log(ov)
      this.getcharts2(ov)
    },
    switch1(ov) {
      console.log(ov)
      this.getcharts1(ov)
    },
    tableData1: function() {
      if (this.tableData1.length === 0) {
        this.pillarNum = '支柱'
      } else {
        this.$refs.defectPillarTop.setCurrentRow(this.tableData1[0])
        this.pillarNum = '支柱' + this.tableData1[0].pillarNum
      }
    }
  },
  created() {
    this.intpage()
  },
  deactivated() {
    this.lookDialog.visible = false
  },
  methods: {
    intpage() {
      findManageUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        // 通过单位标识确定接口，连接各段的数据库
        if (resData.length !== 0) {
          this.deptList_dw = response.data
          this.unitDeptCode = response.data[0].deptNo
          this.listQuery.unitDeptCode = response.data[0].deptNo
        }
        this.changeDw(this.unitDeptCode) // 加载下拉信息列表
        this.getLastCurrentDate()
        this.search()
      })
    },
    // 获取下拉数据、字典
    getList() {

    },
    getLastCurrentDate() {
      const currentDate = new Date()
      const lastCurrentDate_tmp = currentDate.setYear(currentDate.getFullYear() - 1)
      const lastCurrentDate = new Date(parseInt(lastCurrentDate_tmp))
      this.currentDateStr = this.getDateStr(new Date())
      this.lastCurrentDateStr = this.getDateStr(lastCurrentDate)
      this.listQuery.findDateList = [this.lastCurrentDateStr, this.currentDateStr]
    },
    changeDw(val) {
      this.unitDeptCode = val
      this.listQuery['lineId'] = ''
      this.listQuery['lineSiteId'] = ''
      this.listQuery['workShopCode'] = ''
      this.lines = []
      this.siteList = []
      this.deptList_cj = []

      this.queryLine.unitDeptCode = val
      this.getLineList(this.queryLine)
      // 获取车间和线路
      this.deptList_dw.forEach(item => {
        if (val === item.deptNo) {
          this.queryDept.fid = item.deptId
          this.getDeptByTypeCodeBy()
        }
      })
    },
    changeLine(val) {
      this.listQuery['lineSiteId'] = ''
      this.siteList = []
      this.getSiteByLines(val)
    },
    changeFindDate(val) {
      this.listQuery.findDateList = [val[0], val[1]]
    },
    delDeptDw() {
      this.queryDept.fid = ''
      this.getDeptByTypeCodeBy()
      this.delRailShow = false
      this.queryLine.unitDeptCode = ''
      this.getLineList(this.delRailShow)

      this.listQuery.unitDeptCode = ''
    },
    delLine() {
      this.listQuery.lineId = ''
      this.getSiteByLines()
    },
    getDateStr(date) {
      const Y = date.getFullYear() + '-'
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      return Y + M + D
    },
    search() {
      this.listQuery.findStartDate = this.listQuery.findDateList[0]
      this.listQuery.findEndDate = this.listQuery.findDateList[1]
      this.getData()
    },
    // 重置
    reset() {
      this.listQuery = {
        unitDeptCode: '',
        workShopCode: '',
        lineId: '',
        railType: '',
        siteId: '',
        findDateList: ['', ''],
        findStartDate: '',
        findEndDate: ''
        // findDateList: [this.getLastCurrentDate(), new Date()]
        // eslint-disable-next-line no-sequences
      },
      this.deptList_cj = []
      this.lines = []
      this.siteList = []
      this.intpage()
    },
    getData() {
      this.getDefectPillarTop30()
      this.getList()
    },
    getDefectPillarTop30() {
      this.tableData1 = []
      this.tableData2 = []
      this.aliveLevel = false
      this.aliveType = false
      this.listQuery.unitDeptCode = this.unitDeptCode
      getDefectPillarTop30(this.listQuery).then(response => {
        this.tableData1 = response.data

        this.aliveLevel = true
        this.aliveType = true
        if (this.tableData1 == null || this.tableData1.length === 0) {
          this.getDefectPillarDetail()
          // 缺陷类型分布
          this.getDefectTypeEchart()
          // 缺陷等级分布
          this.getDefectLevelEchart()
          // 6c类型分布图---缺陷类型分布散点图
          this.getDefectEchart()
        } else {
          // 缺陷详情
          this.getDefectPillarDetail(response.data[0].pillarId)
          // 缺陷类型分布
          this.getDefectTypeEchart(response.data[0].pillarId)
          // 缺陷等级分布
          this.getDefectLevelEchart(response.data[0].pillarId)
          // 6c类型分布图---缺陷类型分布散点图
          this.getDefectEchart(response.data[0].pillarId)
        }
      }).catch(() => {

      })
    },
    getDefectPillarDetail(pillarId) {
      if (pillarId) {
        getDefectPillarDetail({ 'pillarId': pillarId, 'findStartDate': this.listQuery.findStartDate, 'findEndDate': this.listQuery.findEndDate }).then(response => {
          this.tableData2 = response.data
        })
      } else {
        this.tableData2 = []
      }
    },
    getDefectTypeEchart(pillarId) {
      if (pillarId) {
        getDefectTypeEchart({ 'pillarId': pillarId, 'findStartDate': this.listQuery.findStartDate, 'findEndDate': this.listQuery.findEndDate }).then(response => {
          this.getDefectTypeList = response.data

          this.getcharts1(this.switch1)
        })
      } else {
        this.getDefectTypeList = []
        this.getcharts1(this.switch1)
      }
    },
    getDefectLevelEchart(pillarId) {
      if (pillarId) {
        getDefectLevelEchart({ 'pillarId': pillarId, 'findStartDate': this.listQuery.findStartDate, 'findEndDate': this.listQuery.findEndDate }).then(response => {
          this.getDefectLevelList = []
          if (response.data != null) {
            response.data.forEach((r, i) => {
              this.getDefectLevelList.push({
                name: r.name,
                value: r.value,
                itemStyle: this.colors[i]
              })
            })

            this.getcharts2(this.switch2)
          } else {
            this.getDefectLevelList = []
            this.getcharts2(this.switch2)
          }
        })
      } else {
        this.getDefectLevelList = []
        this.getcharts2(this.switch2)
      }
    },
    // 获取车间
    getDeptByTypeCodeBy() {
      if (this.queryDept.railType !== '' || this.queryDept.fid !== '') {
        getDeptByTypeCodeBy(this.queryDept).then((response) => {
          this.deptList_cj = response.data
        })
      } else {
        this.deptList_cj = []
      }
    },
    // 获取线路
    getLineList(val) {
      if (val) {
        if (this.queryLine.unitDeptCode !== '') {
          getLineList(this.queryLine).then((response) => {
            this.lines = response.data
          })
        } else {
          if (this.queryLine.railType === '' || this.queryLine.railType === '' || val === true) {
            this.lines = []
          } else {
            getLineList(this.queryLine).then((response) => {
              this.lines = response.data
            })
          }
        }
      } else {
        this.lines = []
        // getLineList(this.queryLine).then((response) => {
        //   this.lines = response.data
        // })
      }
    },
    // 获取区间站场
    getSiteByLines(val) {
      if (val && val !== '') {
        getSiteByLines({
          unitDeptCode: this.listQuery.unitDeptCode,
          seclineId: val
        }).then((response) => {
          this.siteList = response.data
        })
      } else {
        this.siteList = []
      }
    },
    rowClick(row, column, event) {
      this.pillarNum = '支柱' + row.pillarNum
      // 缺陷详情
      this.getDefectPillarDetail(row.pillarId)
      // 缺陷类型分布
      this.getDefectTypeEchart(row.pillarId)
      // 缺陷等级分布
      this.getDefectLevelEchart(row.pillarId)
      // 6c类型分布图
      this.getDefectEchart(row.pillarId)
    },
    getcharts2(switch2) {
      console.log(switch2)
      const myChart = echarts.init(this.$refs.charts2)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          right: '3%',
          icon: 'circle',
          itemWidth: 10, // 设置宽度
          itemHeight: 10 // 设置高度
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['50%', '44%'],
            avoidLabelOverlap: false,
            label: {
              show: switch2,
              normal: {
                show: switch2,
                formatter: function(params) {
                  return `${params.name} (${params.percent}%)`
                }

              }
            },
            labelLine: {
              show: switch2
            },
            roseType: 'radius',
            data: this.getDefectLevelList
          }
        ]
      }
      myChart.setOption(option)
    },
    formatDate(row, column) {
      const date = new Date(parseInt(row.findDate))
      const Y = date.getFullYear() + '-'
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      // let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      // let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      // let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      // return Y + M + D + h + m + s;
      return Y + M + D
    },
    getcharts1(switch1) {
      console.log(switch1)
      const myChart = echarts.init(this.$refs.charts1)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          right: '3%',
          icon: 'circle',
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          orient: 'vertical'
        },
        color: ['#3254DD', '#2B8EF3', '#43B6F6', '#84D3FF', '#3EDEDE', '#6BCF3C', '#38A903'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,

            labelLine: {
              show: switch1
            },
            label: {
              show: switch1,
              normal: {
                show: switch1,
                formatter: function(params) {
                  return `${params.name} (${params.percent}%)`
                }

              }
            },
            data: this.getDefectTypeList
          }
        ]
      }
      myChart.setOption(option)
    },
    // 散点图
    getDefectEchart(pillarId) {
      var DefectEchartData = {}
      if (pillarId) {
        DefectEchartData = Object.assign(
          { pillarId: pillarId },
          this.listQuery
        )
      } else {
        DefectEchartData = Object.assign(this.listQuery)
      }

      getDefectEchart(DefectEchartData).then(response => {
        // 这一段是我增加的
        this.tableData3 = {
          C1: [],
          C2: [],
          C3: [],
          C4: [],
          C5: [],
          C6: []
        }
        if (response.data != null && response.data.length > 0) {
          response.data.forEach(item => {
            if (item.cType === '1C') {
              this.tableData3.C1.push([item.time, 1, item.num])
            } else if (item.cType === '2C') {
              this.tableData3.C2.push([item.time, 2, item.num])
            } else if (item.cType === '3C') {
              this.tableData3.C3.push([item.time, 3, item.num])
            } else if (item.cType === '4C') {
              this.tableData3.C4.push([item.time, 4, item.num])
            } else if (item.cType === '5C') {
              this.tableData3.C5.push([item.time, 5, item.num])
            } else if (item.cType === '6C') {
              this.tableData3.C6.push([item.time, 6, item.num])
            }
          })
        }
        // 这一段是我增加的
        const myChart = echarts.init(this.$refs.charts3)
        const option = {
          color: ['#4493FB', '#3646FA', '#57E5FD', '#89FEE2', '#89FE95', '#FEDD89'],
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              return '6C类型: ' + params.data[1] + 'C' + '</br>' + ' 发现时间: ' + params.data[0] + '</br>' + ' 缺陷数目: ' + params.data[2]
            }
          },
          legend: {
            right: '5%'

          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '20%',
            top: '18%'
          },
          xAxis: {
            type: 'time',

            // data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
            splitLine: {
              show: true,
              lineStyle: {
                color: '#C0D1E1',
                width: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#C0D1E1',
                width: 1

              }
            },
            axisLabel: {
              interval: 50,
              rotate: 40,
              textStyle: {
                color: '#606266',
                fontSize: '12'
              }
            }

          },
          yAxis: {
            boundaryGap: false,
            type: 'category',
            data: ['', '1c', '2c', '3c', '4c', '5c', '6c'],
            splitLine: {
              show: true,
              lineStyle: {
                color: '#C0D1E1',
                width: 1
              }
            },

            axisLabel: {

              textStyle: {
                color: '#606266',
                fontSize: '12'
              }
            },
            axisLine: {

              show: true,
              lineStyle: {
                color: '#C0D1E1',
                width: 1

              }
            }

          },
          series: [
            {
              name: '1c',
              type: 'scatter',
              data: this.tableData3.C1
            },
            {
              name: '2c',
              type: 'scatter',
              data: this.tableData3.C2

            },
            {
              name: '3c',
              type: 'scatter',
              data: this.tableData3.C3

            },
            {
              name: '4c',
              type: 'scatter',
              data: this.tableData3.C4

            },
            {
              name: '5c',
              type: 'scatter',
              data: this.tableData3.C5

            },
            {
              name: '6c',
              type: 'scatter',
              data: this.tableData3.C6

            }
          ]
        }
        myChart.setOption(option)
      })
    },
    view(row) {
      const dialog = {
        title: '查看',
        visible: true,
        disabled: false,
        loading: false,
        type: 'view',
        dataList: {},
        form: {
          id: row.id
        }
      }
      console.log(row.id)
      this.lookDialog = Object.assign(this.lookDialog, dialog)
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 95%;
  background: #f1f4fb;
  padding: 0 20px;
}
.header {
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
}
.main {
  width: 100%;
  height: calc(100% - 70px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.form-top-p {
  margin-right: 12px;
  height: 30px;
}
/deep/.el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
/deep/.el-range-editor--medium.el-input__inner {
  height: 30px;
  line-height: 30px;
}
/deep/.box-card {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  float: none;
  background: #ffffff;
  box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
  border-radius: 6px;
  border: 0;
}
/deep/.el-table__body tr.current-row>td {
  background-color: #c6ddf7 !important;
}
.clearfix {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
/deep/.el-card__header {
  padding: 0;
  height: 60px;
  padding: 0 20px;
  border: 0;
  background-color: #fff !important
}
.clearfix span {
  font-weight: 350;
  font-size: 18px;
  color: #061b48;
}
.clearfix img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
}
.cardMain {
  width: 100%;
  height: 100%;
}
/deep/.el-card__body {
  padding: 0;
  width: 100%;
  height: calc(100% - 60px);
  border: 0;
}
.lend {
  width: 155px;

  background: #ffffff;
  box-shadow: -5px 0px 10px rgba(0, 47, 138, 0.07);
  border-radius: 0 6px 6px 0;
}
.chats {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
  border-radius: 6px;
  height: 100%;
}
.chats /deep/.box-card {
  border-radius: 0;
}
/deep/.el-switch__label.is-active {
  color: #303133;
}
</style>
